<!--
  ~ Copyright (c) 2023 Contributors to the Eclipse Foundation
  ~
  ~ See the NOTICE file(s) distributed with this work for additional
  ~ information regarding copyright ownership.
  ~
  ~ This program and the accompanying materials are made available under the
  ~ terms of the Eclipse Public License 2.0 which is available at
  ~ http://www.eclipse.org/legal/epl-2.0
  ~
  ~ SPDX-License-Identifier: EPL-2.0
-->

<h5 data-bs-toggle="collapse" data-bs-target="#servicesLogging">Ditto Services Logging</h5>
<hr />
<div class="collapse show" id="servicesLogging">
    <div class="input-group input-group-sm mt-1 mb-1" role="group">
        <div style="flex-grow: 1;"></div>
        <button class="btn btn-outline-primary btn-sm button_round_left" id="buttonLoadAllLogLevels">
            <i class="bi bi-arrow-clockwise"></i>
            Refresh
        </button>
    </div>
    <div class="row resizable_pane" style="height: 80vh">
        <div class="col-md-12 resizable_flex_column">
            <div id="divLoggers"></div>
            <template id="templateLogger">
                <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
                      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
                <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.min.css"
                    rel="stylesheet"
                    integrity="sha512-dPXYcDub/aeb08c63jRq/k6GaKccl256JQy/AnOq7CAnEZ9FzSL9wSbcZkMp4R26vBsMLFYH4kQ67/bbV8XaCQ=="
                    crossorigin="anonymous" referrerpolicy="no-referrer" />
                <link href="./dist/main.css" rel="stylesheet" />

                <div class="input-group input-group-sm mb-1 has-validation">
                    <input class="form-control me-1" type="text" disabled id="inputLogger" spellcheck="false"></input>
                    <div class="btn-group" role="group">
                        <input type="radio" class="btn-check" name="btnLevel" id="debug" autocomplete="off">
                        <label class="btn btn-sm btn-outline-secondary" for="debug">DEBUG</label>
                        <input type="radio" class="btn-check" name="btnLevel" id="info" autocomplete="off">
                        <label class="btn btn-sm btn-outline-success" for="info">INFO</label>
                        <input type="radio" class="btn-check" name="btnLevel" id="warn" autocomplete="off">
                        <label class="btn btn-sm btn-outline-warning" for="warn">WARN</label>
                        <input type="radio" class="btn-check" name="btnLevel" id="error" autocomplete="off">
                        <label class="btn btn-sm btn-outline-danger" for="error">ERROR</label>
                    </div>
                    <div class="invalid-feedback"></div>
                </div>
            </template>
        </div>
    </div>
</div>
